<html xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css"  />
        <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js" ></script>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script src="../../res/js/mz.common.js"></script>
        <style>
            .layui-input-inline label{line-height: 20px; display: inline-block; width: 100%; text-align: center; padding: 9px 0px;}
        </style>
    </head>
    <body>

        <div id="app" style=" margin: 10px;">

            <div class="layui-form" lay-filter="data-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">模块名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="moduleName" v-model="module.moduleName" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">序号</label>
                    <div class="layui-input-inline"><label>字段名</label></div>
                    <div class="layui-input-inline"><label>字段标题</label></div>
                    <div class="layui-input-inline"><label>字段类型</label></div>
                    <div class="layui-input-inline"><label>关键字</label></div>
                    <div class="layui-input-inline"><label>操作</label></div>
                </div>
                <div v-for="(field,index) in module.fields" class="layui-form-item">
                    <label class="layui-form-label">{{index+1}}</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model="field.name" class="layui-input" >
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" v-model="field.title" class="layui-input" >
                    </div>
                    <div class="layui-input-inline">
                        <select :data-model="'fields['+index+'].type'">
                            <option value="text">text</option>
                            <option value="number">number</option>
                            <option value="textarea">textarea</option>
                            <option value="richtext">richtext</option>
                            <option value="file">file</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="text-align: center;">
                        <input :data-model="'fields['+index+'].key'" type="checkbox" lay-skin="switch" >
                    </div>
                    <div class="layui-input-inline" style="line-height: 38px; text-align: center;">
                        <button v-on:click="addItem(index)" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-addition"></i></button>
                        <button v-on:click="delItem(index)" class="layui-btn layui-btn-danger layui-btn-sm"><i class="layui-icon layui-icon-delete"></i></button>
                    </div>
                </div>

                <div style="text-align: center;">
                    <button class="layui-btn" v-on:click="generate()">生成</button>
                    <button class="layui-btn" v-on:click="genAndDep()">生成&部署</button>
                </div>
            </div>




        </div>


        <script>

            window.data = {
                module: {
                    moduleName: 'new_module',
                    fields: [
                        {name:'id', title: '编号', type: 'number', key: 1}
                    ]
                },

            };

            window.methods = {
                addItem: function(i){
                    var n = this.module.fields.length;
                    var item = {name:'field_' + (n), title: '字段_' + (n), type: 'text'};
                    this.module.fields.splice(i+1, 0, item);
                },

                delItem: function(i){
                    this.module.fields.splice(i, 1);
                },

                checkModule: function(){
                    var tmp = [];
                    var hasKey = false;
                    for(var i=0; i<this.module.fields.length; i++){
                        var field = this.module.fields[i];
                        if(field.key){
                            hasKey = true;
                        }
                        if(tmp.indexOf(field.name) < 0){
                            tmp.push(field.name)
                        }else{
                            layer.msg('字段名不能重复');
                            return false;
                        }
                    }
                    return true;
                },

                generate: function (){

                    if(this.checkModule()){
                        var data = {
                            url: base_context + '/module/generate',
                            fileName: this.module.moduleName + '.zip',
                            data: this.module
                        };

                        layui.$.download(data);
                    }

                },

                genAndDep: function(){
                    if(this.checkModule()){
                        var module = this.module;
                        var data = {
                            url: base_context + '/module/generateAndDeploy',
                            data: module,
                            success: function (data) {
                                if(data.success){
                                    location.href = base_context + '/html/'+module.moduleName+'/list.html';
                                }else{
                                    layer.msg(data.message);
                                }
                            }
                        };

                        layui.$.postContent(data);
                    }

                },
                
                render_form: function (data) {
                    layui.form.val('data-form', data);
                }
            }

            window.updated = function(){
                layui.form.render();
                this.render_form({like: this.module.like});
            }

            //处理特殊字段绑定问题
            layui.use(['form'], function(){
                layui.form.on('switch', function(item){
                    eval("vm.$data.module." + item.elem.dataset.model + "='"+item.elem.checked+"'");
                });
                layui.form.on('select', function(item){
                    eval("vm.$data.module." + item.elem.dataset.model + "='"+item.elem.value+"'")
                });

            });


            window.vm = initVue();


            /**
             * vue绑定集成layui.form
             * 1.初始化后，用vue.data赋值给layui.form
             * 2.绑定layui.form事件，更新到vue.data
             */

        </script>

    </body>
</html>
